import React, { useRef, useEffect } from "react";
import { Form, Input, Button } from "antd";
// import "./index.less";

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 }
};

function AddFrom(props) {
  const formRef = useRef({
    roleName: '',
    roleDesc: '',
  });

  const onFinish = values => {
    props.onOk(values);
    formRef.current.resetFields();
  };

  const onCancel = () => {
    props.onCancel();
    formRef.current.resetFields();
  };

  useEffect(() => {
    formRef.current.setFieldsValue({
      roleName: props.rolesInfo.roleName,
      roleDesc: props.rolesInfo.roleDesc,
    });
  })

  return (
    <Form
      {...layout}
      ref={formRef}
      name='control-hooks'
      onFinish={onFinish}
      initialValues={{
        roleName: '',
        parentType: '0'
      }}
    >
      <Form.Item
        name='roleName'
        label='角色名称'
        rules={[
          { required: true, whitespace: true, message: "请输入角色名称!" },
          { min: 2, message: "名称至少2位" },
          { max: 12, message: "名称最多12位" }
        ]}
      >
        <Input placeholder='请请入角色名称' />
      </Form.Item>
      <Form.Item
        name='roleDesc'
        label='描述'
        rules={[
          { required: true, whitespace: true, message: "请输入描述" }
        ]}
      >
        <Input placeholder='请输入描述' />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type='primary' htmlType='submit'>
          确定
        </Button>
        <Button
          htmlType='button'
          onClick={onCancel}
          className='cancelBtn'
        >
          取消
        </Button>
      </Form.Item>
    </Form>
  );
}

export default AddFrom;
